import React, { Suspense, lazy } from 'react';
import { Navigate } from 'react-router-dom';
import { RouteObject } from 'react-router';

import SidebarLayout from './layouts/SidebarLayout';
import BaseLayout from './layouts/BaseLayout';
import { Loader } from './components';

// Pages

const SceneBuilder = Loader(lazy(() => import('./views/Scenes/SceneBuilder')));
const WidgetBuilder = Loader(lazy(() => import('./views/Widgets/WidgetBuilder')));
const Scenes = Loader(lazy(() => import('./views/Scenes')));
const Materials = Loader(lazy(() => import('./views/Materials')));
const MaterialBuilder = Loader(lazy(() => import('./views/Materials/MaterialBuilder')));
const Widgets = Loader(lazy(() => import('./views/Widgets')));
const Login = Loader(lazy(() => import('./views/Login')));

const routes: RouteObject[] = [
  {
    path: '/',
    element: <SidebarLayout />,
    children: [
      {
        // path: '/',
        index: true,
        element: <Scenes />
      },
      {
        path: 'scenes',
        element: <Scenes />
      },
      {
        path: 'widgets',
        element: <Widgets />
      },
      {
        path: 'materials',
        element: <Materials />,
      },
    ]
  },
  {
    path: 'scene',
    element: <BaseLayout />,
    children: [
      {
        index: true,
        element: <Navigate to="/scenes" replace />
      },
      {
        path: ':id',
        element: <SceneBuilder />
      },
    ]
  },
  {
    path: 'widget',
    element: <BaseLayout />,
    children: [
      {
        index: true,
        element: <Navigate to="/widgets" replace />
      },
      {
        path: ':id',
        element: <WidgetBuilder />
      },
    ]
  },
  {
    path: 'material',
    element: <BaseLayout />,
    children: [
      {
        index: true,
        element: <Navigate to="/materials" replace />
      },
      {
        path: ':id',
        element: <MaterialBuilder />
      },
    ]
  },
  {
    path: 'visitor',
    element: <BaseLayout />,
    children: [
      {
        path: 'login',
        element: <Login />
      },
      {
        path: 'overview',
        element: <Navigate to="/" replace />
      },
    ]
  },
  {
    path: '*',
    element: <Navigate to="/visitor/login" replace />,
  },
];

export default routes;
